<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../../assets/font/iconfont.css">
    <link rel="stylesheet" href="./components/MyPassword.css">
</head>
<body>
    <div id="app">
       <ul>
            <li v-for=" (item,i) in passwords ">
                <p>第{{i+1}}密码：{{ item }}</p>
                <input v-model="passwords[i]" type="text" /> <br><br>
                <my-password :pwd="item" @update:pwd="updatePassword(i,$event)"></my-password>
            </li>
       </ul>
    </div>
    <script type="module">
        import { createApp } from "../../assets/vue3/vue.esm-browser.js";
        import MyPassword from "./components/MyPassword.js";
        createApp({
            components: {
                MyPassword,
            },
            data() {
                return {
                    passwords:[
                        "",
                        "abcdefg",
                        "1a2b3c4d"
                    ]
                }
            },
            methods: {
                updatePassword(i,npwd) {
                    this.passwords[i] = npwd;
                }
            },
        }).mount("#app")
    </script>
</body>
</html>